const webpackBaseConfig = require('./webpack.base.js');//引入webpack基本配置
const webpack = require('webpack');//引入webpack核心模块
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//引入清除文件插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//将CSS提取到单独的文件中
const TerserPlugin = require('terser-webpack-plugin');//压缩js文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//压缩css文件
const { merge } = require('webpack-merge');//引入参数合并loader

const webpackProdConfig = {
  mode: 'production',//打包模式
  devtool: 'cheap-module-source-map',//开发工具
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
              importLoaders: 2
            }
          },
          {//为css样式添加厂商前缀
            loader: "postcss-loader"
          },
          {//将scss文件转换成css文件
            loader: 'sass-loader'
          }
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
              importLoaders: 1
            }
          },
          {//为css样式添加厂商前缀
            loader: "postcss-loader"
          }
        ],
      },
    ]
  },
  plugins: [//插件
    new CleanWebpackPlugin(),//清空dist文件
    new webpack.optimize.AggressiveSplittingPlugin({
      minSize: 10 * 1024, // 字节，分割点。默认：30720
      maxSize: 30 * 1024, // 字节，每个文件最大字节。默认：51200
      chunkOverhead: 0, // 默认：0
      entryChunkMultiplicator: 1, // 默认：1
    }),
    new MiniCssExtractPlugin({//将css文件存放到指定位置
      filename: 'pages/[name]/index.[contenthash].css',
      chunkFilename: 'pages/[name]/index.chunk.[contenthash].css'
    }),
  ],
  optimization: {//优化
    minimizer: [
      new TerserPlugin({//压缩js文件
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log'] // 移除console
          }
        },
      }),
      new OptimizeCssAssetsWebpackPlugin({})//压缩css文件
    ]
  },
  output: {//出口配置
    filename: 'pages/[name]/index.[contenthash].js',//打包好的文件存放目录和名称
    chunkFilename: 'pages/[name]/index.[contenthash].chunk.js',
  }
};

module.exports = merge(webpackBaseConfig, webpackProdConfig);